<template>
  <t-layout class="wh-full">
    <div class="relative flex-center wh-full login-bg">
      <dark-mode-switch :show-color="true" is-button class="absolute left-48px top-24px z-3 text-20px"
                        @click="appStore.toggleDarkMode()"/>
      <t-card :bordered="false">
        <div class="w-400px sm:w-400px">
          <header class="flex-y-center justify-between">
            <home-logo class="font-size-8 w-full h-12 mt flex-center ml-2 fw700"/>
          </header>
          <main>
            <div class="w-full p8">
              <t-form ref="loginFormRef" :rules="loginRules" :data="loginForm" :colon="true" :label-width="0"
                      @submit="login"
                      @reset="onReset">
                <t-form-item name="username">
                  <t-input v-model="loginForm.username" clearable placeholder="请输入用户名">
                    <template #prefix-icon>
                      <user-icon/>
                    </template>
                  </t-input>
                </t-form-item>

                <t-form-item name="password">
                  <t-input v-model="loginForm.password" type="password" clearable placeholder="请输入密码">
                    <template #prefix-icon>
                      <lock-on-icon/>
                    </template>
                  </t-input>
                </t-form-item>
                <t-form-item>
                  <t-button theme="primary" type="submit" block>登录</t-button>
                </t-form-item>
              </t-form>
            </div>
          </main>
        </div>
      </t-card>
    </div>
  </t-layout>
</template>

<script setup lang="ts">
import DarkModeSwitch from "@/components/common/dark-mode-switch.vue";
import HomeLogo from "@/components/common/home-logo.vue";
import {useRouter} from "vue-router";
import {MessagePlugin} from "tdesign-vue-next";
import {useRequest} from "vue-hooks-plus";
import {LockOnIcon, UserIcon} from "tdesign-icons-vue-next";
import {useAppStore} from "@/store/modules/app";
import {useAuthStore} from "@/store/modules/auth";
import {type Ref, ref, unref} from "vue";
import type {LoginForm, TokenInfo} from "@/typings/auth";
import {managerLogin} from "@/service/api/login.ts";
import type {Ret} from "@/typings/api";

const router = useRouter();
const appStore = useAppStore();
const authStore = useAuthStore();

const loginFormRef = ref();
const loginForm: Ref<LoginForm> = ref({
  username: '',
  password: ''
})

const loginRules = {
  username: [
    {required: true, message: '用户名必填', type: 'error'},
    {whitespace: true, message: '用户名不能为空'},
    {min: 3, message: '输入字数应在3到64之间', type: 'error', trigger: 'blur'},
    {max: 64, message: '输入字数应在3到64之间', type: 'error', trigger: 'blur'},
  ],
  password: [{required: true, message: '密码必填', type: 'error'}]
}

const onReset = () => {
  MessagePlugin.success('重置成功');
};

const loginRequest = useRequest(() => {
  const loginParams = unref(loginForm);
  authStore.isSimplePwd = loginParams.password === "123456";
  return managerLogin(loginParams);
}, {
  manual: true,
  debounceWait: 500, //防抖
  onSuccess(res: Ret<TokenInfo>) {
    if (res.code === 0) {
      MessagePlugin.success('登陆成功');
      authStore.token = res.data ?? null;
      router.replace("/")
    } else {
      MessagePlugin.error(res.msg);
    }
  },
  onError(err) {
    MessagePlugin.error(err.message ?? "登录失败");
  }
});

const login = () => {
  if (loginFormRef.value) {
    loginFormRef.value.validate().then((res: unknown) => {
      if (typeof res === "boolean") {
        loginRequest.run();
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.jne-logo {
  margin: 0 20px;
  font-size: 1.6em;
  color: #01a9f2;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 2px;
  user-select: none;
}

.login-bg {
  background-image: url('@/assets/bg/login.svg');
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
}
.captcha {
  height: var(--td-comp-size-m);
  width: 200px;
}
</style>